<template>
  <div class="search-container">
    <el-input v-if="expanded" ref="inputRef"
              v-model="searchText" placeholder="搜索菜友菜谱"
              style="width: 200px;"
              show-word-limit :maxlength="10" clearable
              @keyup.enter="handleSearch" @blur="handleBlur"
    />

    <el-button v-else :icon="Search"
               circle size="small" @click="expandSearch"/>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'

const expanded = ref(false)
const searchText = ref('')
const inputRef = ref(null)

// 展开搜索框
const expandSearch = () => {
  expanded.value = true
  // 等待DOM更新后自动聚焦输入框
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 处理搜索
const handleSearch = () => {
  if (searchText.value.trim()) {
    console.log('搜索内容:', searchText.value)
    // 这里可以触发搜索逻辑
  }
}

// 输入框失去焦点时的处理
const handleBlur = () => {
  if (!searchText.value.trim()) {
    expanded.value = false
  }
}
</script>

<style lang="scss">
</style>
